<template>
  <el-container>
    <!-- 左侧 -->
    <el-aside style="width: auto">
      <el-container style="height: 100%">
        <!-- 导航 -->
        <el-aside style="width: 150px; background: #ededed">
          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical-demo"
            @select="evtMenuSelect"
          >
            <el-menu-item
              :index="item.value"
              v-for="item in menuList"
              :key="item.value"
            >
              <span slot="title">{{ item.label }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 组件列表 -->
        <el-main style="width: 300px; border-right: 1px solid #ededed">
          <div style="width: 100%" class="layoutListBox">
            <ul>
              <draggable
                class="dragArea list-group"
                :list="componentsList"
                :group="{ name: 'comp', pull: 'clone', put: false }"
                @change="log"
              >
                <li
                  v-for="(val, key) in componentsList"
                  draggable
                  :data-key="key"
                  :key="key + 1"
                >
                  <p>{{ val.name }}</p>
                </li>
              </draggable>
            </ul>
          </div>
        </el-main>
      </el-container>
    </el-aside>
    <el-container>
      <el-main style="padding: 0; display: flex">
        <!-- 中间：移动端页面 -->
        <div class="itxst" style="width: calc(100% - 400px)">
          <div>请点击下方模块进行配置</div>
          <draggable
            class="view-content"
            :list="layoutInfo.comList"
            group="comp"
            @change="log"
          >
            <template-modular
              v-for="(item, index) in layoutInfo.comList"
              :key="index"
              :data-index="index"
              :id="index"
              class="areaBox"
              :comData="item"
            ></template-modular>
          </draggable>
        </div>
        <!-- 右侧：参数配置  -->
        <div
          style="
            width: 400px;
            height: 100%;
            border: 1px solid #ededed;
            float: right;
            box-sizing: border-box;
          "
        >
          <EditForm :comData="layoutInfo.comList[configComIndex]"></EditForm>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import draggable from 'vuedraggable'
import templateModular from '@/pages/template/templateList/templateEdit/modular'
import EditForm from '@/pages/template/templateList/templateEdit/modularEdit/index'

export default {
  components: {
    draggable,
    templateModular,
    EditForm,
  },
  data() {
    return {
      // 菜单：选中项
      activeMenu: '',
      // 菜单：一级（label）和二级（componentsList）
      menuList: [
        {
          value: '1',
          label: '基本组件',
          componentsList: [
            { name: '搜索框', components: 'SearchInput', images: '' },
          ],
        },
        {
          value: '2',
          label: '其他',
          componentsList: [
            { name: '焦点图', components: 'Images', images: '' },
            {
              name: 'tab菜单',
              components: 'Navigation',
              content: [
                {
                  label: '产品信息',
                  images: '',
                  activeImages: '',
                  ifInputing: true,
                },
                {
                  label: '企业信息',
                  images: '',
                  activeImages: '',
                  ifInputing: false,
                },
                {
                  label: '溯源过程',
                  images: '',
                  activeImages: '',
                  ifInputing: false,
                },
                {
                  label: '溯源过程',
                  images: '',
                  activeImages: '',
                  ifInputing: false,
                },
              ],
            },
          ],
        },
      ],
      // 菜单：组件列表(存在初始值:跟随activeMenu)
      componentsList: [],
      // 包装好的数据；(对象好扩展)
      layoutInfo: {
        comList: [],
      },
      // 配置：layoutInfo.comList数组的下标
      configComIndex: '',
    }
  },
  methods: {
    log: function (evt) {
      console.log(evt, 'evttt')
      if (evt.added) {
        this.boxSetup()
      }
    },
    // 切换菜单
    evtMenuSelect(index) {
      this.activeMenu = index
      this.componentsList = this.menuList[this.activeMenu - 1].componentsList
    },
    // 中间：组件绑定点击事件；（配置）
    boxSetup() {
      let that = this
      let areaBoxs = document.getElementsByClassName('areaBox')
      areaBoxs.forEach((val) => {
        val.removeEventListener
        val.addEventListener('click', function (e) {
          that.configComIndex = val.getAttribute('id')
        })
      })
    },
  },
  mounted() {
    this.evtMenuSelect('1')
    this.boxSetup()
  },
}
</script>

<style lang='scss' scoped>
* {
  font-size: 14px;
}
// 导航样式
/deep/.el-menu {
  background-color: #ededed;
  border-right: none;
}

/deep/.el-menu-item.is-active {
  color: #333;
  background-color: #fff;
}

// 布局样式列表
.layoutListBox {
  ul {
    margin: 0;
    padding: 0;
    li {
      margin-top: 10px;
      padding: 10px;
      background-color: #ededed;
      list-style: none;
      cursor: default;
      color: #666;
      border-radius: 6px;
      transition: all 0.3s;
      cursor: pointer;
    }
  }
}
// 布局样式
.itxst {
  width: calc(100% - 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .view-content {
    margin-top: 20px;
    width: 400px;
    height: 700px;
    background: #f5f5f5;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 2px 6px #ccc;
    &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background: #dbdbdb;
    }
    &::-webkit-scrollbar-track {
      background: #f6f6f6;
    }
  }
}
</style>